<template>
	<view class="container">
		<view class="hd">
			<image mode="widthFix" class="pic" src="@/static/images/logo.png"></image>
		</view>
		<view class="p">
			<checkbox-group name="" @change="isAgree=!isAgree">
				<checkbox class="checkbox" value="cb" :checked="isAgree ? true : false" />
				<text class="vertical-middle">
					已阅读并同意 <text class="text-green" @tap="showAgreement('user')">《用户使用协议》</text>
					和
					<text class="text-green" @tap="showAgreement('privacy')">《隐私权条款》</text>
				</text>


			</checkbox-group>
		</view>
		<view class="ft">
			<!-- <button type="primary" style="background-color: #06A972;" open-type="getPhoneNumber" @getphonenumber="getphonenumber">
				<image mode="widthFix" class="pic" src="@/static/images/wx.png"></image>
				<text>微信一键登录</text>
			</button> -->
			<!-- #ifdef MP -->
			<u-button text="手机号快捷登录" v-if="mp_is_new" @click="userLogin" color="#06A972"
				customStyle="height: 88rpx;"></u-button>
			<u-button text="手机号快捷登录" v-else-if="canUseGetUserProfile" @click="userLogin" color="#06A972"
				customStyle="height: 88rpx;"></u-button>
			<u-button text="手机号快捷登录" v-else open-type="getUserInfo" @getuserinfo="userLogin" color="#06A972"
				customStyle="height: 88rpx;"></u-button>
			<button hover-class="none" v-if="mp_is_new" @tap="userLogin" class="bg-color text-white">微信一键登录</button>
			<button v-else-if="canUseGetUserProfile" hover-class="none" @tap="getUserProfile"
				class="bg-color text-white">微信一键登录</button>
			<button v-else hover-class="none" open-type="getUserInfo" @getuserinfo="setUserInfo"
				class="bg-color text-white">微信一键登录</button>
			<!-- #endif -->
			<u-button  text="手机验证登录" icon="../../../../static/images/tel.png" @click="goPhoneLogin" color="#f8f8f8" customStyle="color: #000; border-color: #e6e6e6; height: 88rpx;" ></u-button>
			<!-- <button type="default" class="btn" @click="goPhoneLogin">
				<image mode="widthFix" class="pic" src="@/static/images/tel.png"></image>
				<text>手机验证登录</text>
			</button> -->
		</view>
		<u-modal :show="showAuthorizeUser" :show-confirm-button="false">
		    <view class="slot-content">
		        <div class="auth-card">
		            <div class="img">
						<img class="avatar-img"
						                     src="../../../static/images/default_avatar.png"
						                     mode="widthFix">
		            </div>
		            <div class="title">车灯师平台</div>
		            <div class="content">邀请您补全个人信息<br></br>（昵称、头像）</div>
		        <div style="margin-left: 100rpx;margin-right: 100rpx">
		            <u-form ref="uForm">
		                <u-form-item label="头像">
		                    <button class="avatar-wrapper" open-type="chooseAvatar"  @chooseavatar="onChooseAvatar" slot="right">
		                        <image class="avatar" :src="user.avatarUrl"></image>
		                    </button>
		                </u-form-item>
		                <u-form-item label="昵称">
		                    <input type="nickname" @blur="updateUserName"  v-model="user.nickName" class="weui-input" placeholder="请输入昵称"/>
		                </u-form-item>
		            </u-form>
		        </div>
		        </div>
		    <div class="auth-btncard">
		        <div class="btn-unok"><u-button :hair-line='false' :custom-style="customStyleUnOk" @click="logout"> 拒绝</u-button></div>
		        <div class="btn-ok"><u-button type="primary" :hair-line='false' :custom-style="customStyleOk" @click="authUser"> 允许</u-button></div>
		    </div>
		    </view>
		</u-modal>
	</view>
</template>

<script>
	import Routine from '@/libs/routine';
	import {
		xcxLogin,
		saveType,
		updateUserInfo
	} from '@/api/user.js';
	import {
		auth
	} from '@/api/wechat.js';
	import { HTTP_REQUEST_URL } from '@/config/app';
	export default {
		data() {
			return {
				user:{
					userId: null,
					avatarUrl:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				    nickName:'',
				            },
				showAuthorizeUser: false,
				isAgree: false,
				canUseGetUserProfile: false,
				mp_is_new: this.$Cache.get('MP_VERSION_ISNEW') || false,
				keyLock: true,
			}
		},

		onLoad() {
			let that = this;
			uni.getUserProfile();
			if (uni.getUserProfile) {
				that.canUseGetUserProfile = true
			}
			// #ifdef MP
			// Routine.getCode()
			// 	.then(code => {
			// 		that.code = code;
			// 	})
			// #endif
		},

		onShow() {

		},

		methods: {
			showAgreement(type) {
				let content = '';
				if (type === 'user') {
					content = `本应用尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更有个性化的服务，本应用会按照本隐私权政策的规定使用和披露您的个人信息。但本应用将以高度的勤勉、审慎义务对待这些信息。除本隐私权政策另有规定外，在未征得您事先许可的情况下，本应用不会将这些信息对外披露或向第三方提供。本应用会不时更新本隐私权政策。 您在同意本应用服务使用协议之时，即视为您已经同意本隐私权政策全部内容。本隐私权政策属于本应用服务使用协议不可分割的一部分。
				
				1. 适用范围
				
				(a) 在您使用本应用网络服务，或访问本应用平台网页时，本应用自动接收并记录的您的浏览器和计算机上的信息，包括但不限于您的IP地址、浏览器的类型、使用的语言、访问日期和时间、软硬件特征信息及您需求的网页记录等数据；
				
				您了解并同意，以下信息不适用本隐私权政策：
				
				(a) 本应用收集到的您在本应用发布的有关信息数据，包括但不限于参与活动、成交信息及评价详情；
				
				(b) 违反法律规定或违反本应用规则行为及本应用已对您采取的措施。
				
				2. 信息使用
				
				(a)本应用不会向任何无关第三方提供、出售、出租、分享或交易您的个人信息，除非事先得到您的许可，或该第三方和本应用（含本应用关联公司）单独或共同为您提供服务，且在该服务结束后，其将被禁止访问包括其以前能够访问的所有这些资料。
				
				(b) 本应用亦不允许任何第三方以任何手段收集、编辑、出售或者无偿传播您的个人信息。任何本应用平台用户如从事上述活动，一经发现，本应用有权立即终止与该用户的服务协议。
				
				3. 信息披露
				
				在如下情况下，本应用将依据您的个人意愿或法律的规定全部或部分的披露您的个人信息：
				
				(a) 经您事先同意，向第三方披露；
				
				(b)为提供您所要求的产品和服务，而必须和第三方分享您的个人信息；
				
				(c) 根据法律的有关规定，或者行政或司法机构的要求，向第三方或者行政、司法机构披露；
				
				(d) 如您出现违反中国有关法律、法规或者本应用服务协议或相关规则的情况，需要向第三方披露；
				
				(e) 如您是适格的知识产权投诉人并已提起投诉，应被投诉人要求，向被投诉人披露，以便双方处理可能的权利纠纷；
				
				(f) 在本应用平台上创建的某一交易中，如交易任何一方履行或部分履行了交易义务并提出信息披露请求的，本应用有权决定向该用户提供其交易对方的联络方式等必要信息，以促成交易的完成或纠纷的解决。
				
				(g) 其它本应用根据法律、法规或者网站政策认为合适的披露。
				
				4. 信息存储和交换
				
				本应用收集的有关您的信息和资料将保存在本应用及（或）其关联公司的服务器上，这些信息和资料可能传送至您所在国家、地区或本应用收集信息和资料所在地的境外并在境外被访问、存储和展示。
				
				5. Cookie的使用
				
				(a) 在您未拒绝接受cookies的情况下，本应用会在您的计算机上设定或取用cookies ，以便您能登录或使用依赖于cookies的本应用平台服务或功能。本应用使用cookies可为您提供更加周到的个性化服务，包括推广服务。
				
				(b) 您有权选择接受或拒绝接受cookies。您可以通过修改浏览器设置的方式拒绝接受cookies。但如果您选择拒绝接受cookies，则您可能无法登录或使用依赖于cookies的本应用网络服务或功能。
				
				(c) 通过本应用所设cookies所取得的有关信息，将适用本政策。
				
				6. 信息安全
				
				(a) 本应用帐号均有安全保护功能，请妥善保管您的用户名及密码信息。本应用将通过对用户密码进行加密等安全措施确保您的信息不丢失，不被滥用和变造。尽管有前述安全措施，但同时也请您注意在信息网络上不存在“完善的安全措施”。
				
				(b) 在使用本应用网络服务进行网上交易时，您不可避免的要向交易对方或潜在的交易对
				
				7.本隐私政策的更改
				
				(a)如果决定更改隐私政策，我们会在本政策中、本公司网站中以及我们认为适当的位置发布这些更改，以便您了解我们如何收集、使用您的个人信息，哪些人可以访问这些信息，以及在什么情况下我们会透露这些信息。
				
				(b)本公司保留随时修改本政策的权利，因此请经常查看。如对本政策作出重大更改，本公司会通过网站通知的形式告知。
				
				请您妥善保护自己的个人信息，仅在必要的情形下向他人提供。如您发现自己的个人信息泄密，尤其是本应用用户名及密码发生泄露，请您立即联络本应用客服，以便本应用采取相应措施。		        `;
				} else if (type === 'privacy') {
					content = `软件服务及隐私条款 欢迎您使用软件及服务，以下内容请仔细阅读。
1、保护用户个人信息是一项基本原则，我们将会采取合理的措施保护用户的个人信息。除法律法规规定的情形外，未经用户许可我们不会向第三方公开、透漏个人信息。APP对相关信息采用专业加密存储与传输方式，保障用户个人信息安全，如果您选择同意使用APP软件， 即表示您认可并接受APP服务条款及其可能随时更新的内容。

2、我们将会使用您的以下功能：麦克风、喇叭、WIFI网络、蜂窝通信网络、手机基站数据、SD卡、短信控制、通话权限、蓝牙管理，如果您禁止APP使用以上相关服务和功能，您将自行承担不能获得或享用APP相应服务的后果。

3、为了提供更好的客户服务，基于技术必要性收集一些有关设备级别事件（例如崩溃）的信息，但这些信息并不能够让我们识别您的 身份。为了能够让APP定位服务更精确，可能会收集并处理有关您实际所在位置信息（例如移动设备发送的GPS信号），WI-FI接入点和 基站位置信息。我们将对上述信息实施技术保护措施，以最大程度保护这些信息不被第三方非法获得，同时，您可以自行选择拒绝我们基于技术必要性 收集的这些信息，并自行承担不能获得或享用APP相应服务的后果。

4、在您使用我们的产品或服务的过程中，我们可能：需要您提供个人信息，如姓名、电子邮件地址、电话号码、联系地址等以及注册或申请服务时需要 的其它类似个人信息；您对我们的产品和服务使用即表明您同意我们对这些信息的收集和合理使用。您可以自行选择拒绝、放弃使用相关产品或服务。

5、由于您的自身行为或不可抗力等情形，导致上述可能涉及您隐私或您认为是私人信息的内容发生被泄露、批漏，或被第三方获取、使用、转让等情形的，均由您自行承担不利后果，我们对此不承担任何责任。

6、我们拥有对上述条款的最终解释权。`;
				}
				uni.showModal({
					title: type === 'user' ? '用户使用协议' : '隐私权条款',
					content: content,
					showCancel: false,
					confirmText: '关闭',
				});
			},
			/**
			 * 最新微信登录
			 */
			userLogin() {
				let that = this;
				if (!that.isAgree) return that.$util.Tips({
					title: '请勾选用户协议与隐私政策'
				});
				if (this.keyLock) {
					this.keyLock = !this.keyLock
				} else {
					return that.$util.Tips({
						title: '请勿重复点击'
					});
				}
				Routine.getCode().then(code => {
					uni.showLoading({
						title: '正在登录中'
					});
					that.getAuth(code).then(res => {
						xcxLogin({
							unionId: res.unionid,
							xcxOpenId: res.openId
						}).then(res => {
							this.keyLock = true;
							if (res.value.regStatus == "S0X") {
								return that.$util.Tips({
									title: '你的账号已经被停用，请联系管理员！'
								})
							}
							if (res.value.regStatus == "S0P") {
								that.$util.Tips({
									title: '您还没有注册！'
								}, {
									tab: 5,
									url: '/pages/users/register/index'
								})
							} else {
								// let time = res.data.expires_time - that.$Cache.time();
								that.$store.commit('LOGIN', {
									token: res.value.token,
									uid: res.value.userInfoId,
									// time: time
								});
								this.user.userId = res.value.userInfoId;
								that.$store.commit('SETUID', res.value.userInfoId);
								that.$store.commit("USER_TYPE", res.value.userType);
								that.$store.commit('UPDATE_USERINFO', res.value);
								that.$store.commit('IS_SALESMAN', res.value.isSalesman);
								
								console.log(res.value);
								console.log(that.$store.commit('UPDATE_USERINFO', res.value));
								that.$store.commit('IS_STORE', !!res.value.storeName);
								// that.$store.commit('IS_SALE', parseInt(res.value.bgUserType));
								if (!res.value.userType) {
									saveType({
										userInfoId: res.value.userInfoId,
										userType: 'CAR'
									}).then(res => {
										that.$store.commit('USER_TYPE', 'CAR');
									}).catch(err => {
										that.$util.Tips({
											title: err
										})
									})
								}
								//判断用户的头像和昵称是否补齐
								if (res.value.headImgUrl == null || res.value.headImgUrl == '' || res.value.userName == null || res.value.userName == '') {
									uni.hideLoading();
									this.showAuthorizeUser = true;
								} else {
									that.$util.Tips({
										title: `登录成功`,
										icon: 'success'
									}, {
										tab: 3,
										url: 1
									});
								}
								// if (!res.value.storeName) {
								// 	that.$util.Tips({
								// 		title: `登录成功`,
								// 		icon: 'success'
								// 	}, {
								// 		tab: 5,
								// 		url: '/pages/users/apply_store/index'
								// 	});
								// } else {
								// }
				
							}
						}).catch(err => {
							uni.hideLoading();
							this.keyLock = true
							that.$util.Tips({
								title: err
							})
						})
					}).catch(err => {
						that.$util.Tips({
							title: err
						})
						this.keyLock = true
						uni.hideLoading();
					})
				})
			},
			authUser() {
				let that = this;
				//判断是否补全资料
				if (this.user.avatarUrl == null || this.user.avatarUrl == 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0' || this.user.nickName == null || this.user.nickName == '') {
					that.$util.Tips({
						title: `请补全个人信息`,
						icon: 'error'
					});
				} else {
					that.$util.Tips({
						title: `登录成功`,
						icon: 'success'
					}, {
						tab: 3,
						url: 1
					});
				}
			},
			logout(){
				let that = this;
				that.$store.commit("LOGOUT");
				uni.reLaunch({
					url: '/pages/user/index',
					})
			},
			onChooseAvatar(e) {
				let that = this;
			    const { avatarUrl } = e.detail 
			    this.user.avatarUrl = avatarUrl
				uni.uploadFile({
					url: HTTP_REQUEST_URL + '/api/' + 'user/updateHeadImage',
					filePath: avatarUrl,
					name: 'headImageFiles',
					formData: {
						'userInfoId': this.user.userId
					},
					header: {
						// #ifdef MP
						"Content-Type": "multipart/form-data",
						// #endif
					},
					success: function(res) {
						uni.hideLoading();
						let data = res.data ? JSON.parse(res.data) : {};
						console.log(data);
					},
					fail: function(res) {
						uni.hideLoading();
						that.Tips({
							title: '上传图片失败'
						});
					}
				})
			  },
			  updateUserName() {
			  	updateUserInfo({
			  		userInfoId: this.user.userId,
			  		userName: this.user.nickName
			  	}).then(res => {
			  		
			  	}).catch(err => {
			  		that.$util.Tips({
			  			title: '失败'
			  		})
			  	})
			  },
			getUserProfile() {
				let that = this;
				if (!that.isAgree) return that.$util.Tips({
					title: '请勾选用户协议与隐私政策'
				});
				if (that.keyLock) {
					that.keyLock = !that.keyLock
				} else {
					return that.$util.Tips({
						title: '请勿重复点击'
					});
				}
				Routine.getCode().then(code => {
					uni.showLoading({
						title: '正在登录中'
					});
					that.getAuth(code).then(res => {
						xcxLogin({
							unionId: res.unionid,
							xcxOpenId: res.openId
						}).then(res => {
							that.keyLock = true;
							if (res.value.regStatus == "S0X") {
								return that.$util.Tips({
									title: '你的账号已经被停用，请联系管理员！'
								})
							}
							if (res.value.regStatus == "S0P") {
								that.$util.Tips({
									title: '您还没有注册！'
								}, {
									tab: 5,
									url: '/pages/users/register/index'
								})
							} else {
								// let time = res.data.expires_time - that.$Cache.time();
								that.$store.commit('LOGIN', {
									token: res.value.token,
									uid: res.value.userInfoId,
									// time: time
								});
								that.$store.commit('SETUID', res.value.userInfoId);
								that.$store.commit("USER_TYPE", res.value.userType);
								that.$store.commit('UPDATE_USERINFO', res.value);
								that.$store.commit('IS_STORE', !!res.value.storeName);
								that.$store.commit('IS_SALE', parseInt(res.value.bgUserType));
								if (!res.value.userType) {
									saveType({
										userInfoId: res.value.userInfoId,
										userType: 'STORE'
									}).then(res => {
										that.$store.commit('USER_TYPE', 'STORE');
									}).catch(err => {
										that.$util.Tips({
											title: err
										})
									})
								}
								// if (!res.value.storeName) {
								// 	that.$util.Tips({
								// 		title: `登录成功`,
								// 		icon: 'success'
								// 	}, {
								// 		tab: 5,
								// 		url: '/pages/users/apply_store/index'
								// 	});
								// } else {
								that.$util.Tips({
									title: `登录成功`,
									icon: 'success'
								}, {
									tab: 3
								});
								// }

							}
						}).catch(err => {
							uni.hideLoading();
							that.keyLock = true
							that.$util.Tips({
								title: err
							})
						})
					}).catch(err => {
						uni.hideLoading();
						that.keyLock = true
						that.$util.Tips({
							title: err
						})
					})
				})
			},

			setUserInfo() {
				let that = this;
				if (!that.isAgree) return that.$util.Tips({
					title: '请勾选用户协议与隐私政策'
				});
				if (that.keyLock) {
					that.keyLock = !that.keyLock
				} else {
					return that.$util.Tips({
						title: '请勿重复点击'
					});
				}
				Routine.getCode().then(code => {
					uni.showLoading({
						title: '正在登录中'
					});
					that.getAuth(code).then(res => {
						xcxLogin({
							unionId: res.unionid,
							xcxOpenId: res.openId
						}).then(res => {
							if (res.value.regStatus == "S0X") {
								return that.$util.Tips({
									title: '你的账号已经被停用，请联系管理员！'
								})
							}
							if (res.value.regStatus == "S0P") {
								that.$util.Tips({
									title: '您还没有注册！'
								}, {
									tab: 5,
									url: '/pages/users/register/index'
								})
							} else {
								// let time = res.data.expires_time - that.$Cache.time();
								that.$store.commit('LOGIN', {
									token: res.value.token,
									uid: res.value.userInfoId,
									// time: time
								});
								that.$store.commit('SETUID', res.value.userInfoId);
								that.$store.commit("USER_TYPE", res.value.userType);
								that.$store.commit('UPDATE_USERINFO', res.value);
								that.$store.commit('IS_STORE', !!res.value.storeName);
								that.$store.commit('IS_SALE', parseInt(res.value.bgUserType));
								if (!res.value.userType) {
									saveType({
										userInfoId: res.value.userInfoId,
										userType: 'STORE'
									}).then(res => {
										that.$store.commit('USER_TYPE', 'STORE');
									}).catch(err => {
										that.$util.Tips({
											title: err
										})
									})
								}
								// if (!res.value.storeName) {
								// 	that.$util.Tips({
								// 		title: `登录成功`,
								// 		icon: 'success'
								// 	}, {
								// 		tab: 5,
								// 		url: '/pages/users/apply_store/index'
								// 	});
								// } else {
								that.$util.Tips({
									title: `登录成功`,
									icon: 'success'
								}, {
									tab: 3
								});
								// }

							}
						}).catch(err => {
							uni.hideLoading();
							that.keyLock = true
							that.$util.Tips({
								title: err
							})
						})
					}).catch(err => {
						uni.hideLoading();
						that.keyLock = true
						that.$util.Tips({
							title: err
						})
					})
				})
			},


			/**
			 * @param {Object} code
			 * 获取openid
			 */
			getAuth(code) {
				return new Promise((resolve, reject) => {
					let that = this;
					auth({
						wxCode: code
					}).then(res => {
						resolve(res.value);
					}).catch(err => {
						reject(err)
					})
				});
			},

			// 小程序获取手机号码
			getphonenumber(e) {
				console.log(e);
				if (!this.isAgree) return this.$util.Tips({
					title: '请勾选用户协议与隐私政策'
				});
				uni.showLoading({
					title: '加载中'
				});
				Routine.getCode()
					.then(code => {
						this.getUserPhoneNumber(e.detail.encryptedData, e.detail.iv, code);
					})
					.catch(error => {
						uni.hideLoading();
					});
			},

			// 小程序获取手机号码回调
			getUserPhoneNumber(encryptedData, iv, code) {

				this.$request.post('', {
						encryptedData: encryptedData,
						iv: iv,
						code: code,
					})
					.then(res => {
						let time = res.data.expires_time - this.$Cache.time();
						this.$store.commit('LOGIN', {
							token: res.data.token,
							time: time
						});
						this.getUserInfo();
					})
					.catch(res => {
						uni.hideLoading();
					});
			},


			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				this.$request.get('').then(res => {
					uni.hideLoading();
					that.userInfo = res.data
					that.$store.commit("SETUID", res.data.uid);
					that.$store.commit("UPDATE_USERINFO", res.data);
					that.isStatus = true
					this.close()
				});
			},

			goPhoneLogin() {
				this.$util.Tips('/pages/users/manual_login/index');
			}
		}
	}
</script>

<style>
	.container {
		padding: 70rpx 70rpx 0;
	}

	.container .hd {
		text-align: center;
	}

	.container .hd image {
		width: 300rpx;
		height: 371rpx;
	}

	.container .p {
		font-size: 24rpx;
		margin-top: 60rpx;
	}

	.container .p text {
		/* color: #06A972; */
	}

	.container .p .checkbox {
		transform: scale(0.7);
		color: #06A972;
	}

	.container .ft {
		padding: 20rpx 0 0;
	}

	.container .ft button {
		margin-top: 30rpx;
		font-size: 32rpx;
		padding: 4rpx;
	}

	.container .ft image {
		width: 38rpx;
		margin: -3px 5px 0 0;
	}

	.u-icon image {
		width: 40rpx !important;
		height: 40rpx !important;
	}

	.u-button__text {
		font-size: 32rpx !important;
	}
</style>
<style lang="scss" scoped>
	.auth-btncard{
	    .btn-unok{
	        width: 50%;
	        float: left;
	    }
	    .btn-ok{
	        width: 50%;
	        float: left;
	        margin: 0;
	        padding: 0;
	        border: 0px solid transparent;  
	        outline: none;   
	        u-button{
	            margin: 0;
	            padding: 0;
	            border: 0px solid transparent; 
	            outline: none;   
	        }
	    }
	}
	.auth-card{
	    text-align: center;
	    .avatar-img{
	        width: 150rpx;
	        height: 150rpx;
	        overflow: hidden;
	        border-radius: 100%;
	        margin-top: 30rpx;
	    }
	    .title{
	        font-size: 20rpx;
	    }
	    .content{
	        margin-top: 10rpx;
	    }
	}
	.authorize-box {
	    background-color: transparent;
	    text-align: center;
	    .authorize-avatar {
	        width: 200rpx;
	        height: 200rpx;
	    }
	    .authorize-btn {
	        position: relative;
	        top: 40rpx;
	    }
	}
	.u-mode-center-box {
	    background-color: transparent !important;
	}
    .avatar-wrapper{
        width: 150rpx;
        height: 100rpx;
        color: #333 !important;
        text-align: center !important;
        border: none !important;
        border-radius:0 !important;
        background-color:transparent !important;
    }
    .avatar-wrapper::after {
        border: none !important;
    }
    .avatar{
        width: 100rpx;
        height: 100rpx;
        overflow: hidden;
        border-radius: 100%;
    }
</style>
